<template>
  <div>
    <h2>{{$route.meta.title}}:</h2>
    <el-button type="primary" size="small" style="margin: 0 0 20px 0px" @click="add">添加通道</el-button>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="channelNo" label="通道编号" width="180"></el-table-column>
      <el-table-column prop="channelCom" label="通道公司" width="180"></el-table-column>
      <el-table-column prop="minQuota" label="充值最小限额"></el-table-column>
      <el-table-column prop="maxQuota" label="充值最大限额"></el-table-column>
      <el-table-column prop="minPayment" label="最小提现"></el-table-column>
      <el-table-column prop="maxPayment" label="最大提现"></el-table-column>
      <el-table-column prop="serviceCharge" label="提现手续费"></el-table-column>
      <el-table-column label="通道状态">
        <template v-slot="{ row }">
          <span>{{ row.paymentStatus === 1 ? '正常': '禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否删除">
        <template v-slot="{ row }">
          <span>{{ row.status === 1 ? '正常': '删除'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="lookProduct(row)">查看通道产品</el-button>
          <el-button size="mini" type="primary" @click="update(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--修改产品弹窗-->
    <el-dialog title="修改产品" :visible.sync="updateProductVisible" width="60%">
      <el-form :model="updateProductInfo" :inline="true" ref="merchantForm">
        <el-form-item label="通道产品Id">
          <el-input
            v-model="updateProductInfo.chanProId"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="费率">
          <el-input
            v-model="updateProductInfo.rate"
            autocomplete="off"
            type="number"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看产品-->
    <el-dialog title="查看产品" :visible.sync="productVisible" width="60%">
      <div>
        选择产品:
        <el-select v-model="addInfo.productId" placeholder="请选择" size="mini">
          <el-option
            v-for="(item) in listProductData"
            :key="item.productId"
            :label="item.productName"
            :value="item.productId"
            class="input"
          ></el-option>
        </el-select>费率:
        <el-input v-model="addInfo.rate" type="number" autocomplete="off" size="mini" class="input"></el-input>
        <el-button size="mini" type="primary" @click="addProduct">添加产品</el-button>
      </div>
      <el-table :data="productData" stripe style="width: 100%" border>
        <el-table-column label="通道公司" width="180">
          <template v-slot="{ row }">
            <span>{{ row.channel.channelCom}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="费率" width="180"></el-table-column>
        <el-table-column label="通道产品">
          <template v-slot="{ row }">
            <span>{{ row.product.productName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="updateProduct(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog :title="type === 1? '添加通道' : '修改通道信息'" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="channelData" :inline="true" ref="merchantForm" :rules="channelRules">
        <el-form-item label="通道编号" :label-width="formLabelWidth" prop="channelNo">
          <el-input v-model="channelData.channelNo" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="通道名称" :label-width="formLabelWidth" prop="channelCom">
          <el-input v-model="channelData.channelCom" autocomplete="off" size="mini" class="input"></el-input>
        </el-form-item>
        <el-form-item label="充值最小限额" :label-width="formLabelWidth" prop="minQuota">
          <el-input
            v-model="channelData.minQuota"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="充值最大限额" :label-width="formLabelWidth" prop="maxQuota">
          <el-input
            v-model="channelData.maxQuota"
            autocomplete="off"
            type="number"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="提现最小限额" :label-width="formLabelWidth" prop="minPayment">
          <el-input
            v-model="channelData.minPayment"
            autocomplete="off"
            size="mini"
            type="number"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="提现最大限额" :label-width="formLabelWidth" prop="maxPayment">
          <el-input
            v-model="channelData.maxPayment"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="手续费" :label-width="formLabelWidth" prop="serviceCharge">
          <el-input
            v-model="channelData.serviceCharge"
            type="number"
            autocomplete="off"
            size="mini"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="通道代付状态"
          :label-width="formLabelWidth"
          prop="serviceCharge"
          v-if="type === 2"
        >
          <el-select v-model="paymentStatus" placeholder="请选择">
            <el-option label="开启" :value="1"></el-option>
            <el-option label="关闭" :value="2"></el-option>
          </el-select>:
        </el-form-item>
        <el-form-item
          label="是否删除"
          :label-width="formLabelWidth"
          prop="serviceCharge"
          v-if="type === 2"
        >
          <el-select v-model="status" placeholder="请选择">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="删除" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listChannel, addChannel, updChannel } from "@/api/aisleManage";
import {
  listChannelPro,
  listProduct,
  addChannelPro,
  updChannelPro
} from "@/api/productManage";
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      type: 0,
      merchantName: "",
      paymentStatus: 0,
      addInfo: {
        productId: "",
        rate: ""
      },
      productVisible: false,
      updateProductVisible: false,
      updateProductInfo: {
        chanProId: "",
        rate: ""
      },
      status: 0,
      tableData: [],
      listProductData: [],
      productData: [],
      channelData: {},
      channelRules: {
        channelNo: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        channelCom: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        minQuota: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        maxQuota: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        minPayment: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        maxPayment: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        serviceCharge: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    updateConfirm() {
      let { chanProId, rate } = this.updateProductInfo;
      updChannelPro({
        chanProId,
        rate
      }).then(res => {
        if (res.data.data === 1) {
          this.$message.success(res.data.message);
          this.$router.go(0);
        } else {
          this.$message.warning(res.data.message);
        }
      });
    },
    updateProduct(row) {
      this.updateProductInfo = row;
      this.productVisible = false;
      this.updateProductVisible = true;
    },
    addProduct() {
      addChannelPro(this.addInfo).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.$router.go(0);
        } else {
          this.$message.warning(res.data.message);
        }
      });
    },
    add() {
      this.type = 1;
      this.channelData = {
        channelNo: "",
        channelCom: "",
        minQuota: "",
        maxQuota: "",
        minPayment: "",
        maxPayment: "",
        serviceCharge: ""
      };
      this.dialogFormVisible = true;
    },
    getListChannel() {
      listChannel().then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
      });
    },
    addChannel() {
      addChannel(this.channelData).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.$router.go(0);
        } else {
          this.$message.warning(res.data.message);
        }
      });
    },
    updateChannel() {
      this.$confirm("确定更改为删除状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.channelData.status = this.status;
          this.channelData.paymentStatus = this.paymentStatus;
          updChannel(this.channelData).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.$router.go(0);
            } else {
              this.$message.warning(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    lookProduct(row) {
      this.addInfo.channelId = row.channelId;
      listChannelPro({
        channelId: row.channelId
      }).then(res => {
        if (res.data.code === 200) {
          this.productData = res.data.data;
          this.productVisible = true;
        }
      });
      listProduct().then(res => {
        if (res.data.code === 200) {
          this.listProductData = res.data.data;
        }
      });
    },
    addConfirm() {
      this.type === 1 ? this.addChannel() : this.updateChannel();
    },
    update(row) {
      this.type = 2;
      this.channelData = row;
      console.log(row);
      this.paymentStatus = row.paymentStatus;
      this.status = row.status;
      this.dialogFormVisible = true;
    }
  },
  created() {
    this.getListChannel();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/norlize.scss";

.input {
  width: 200px;
  margin: 0 10px 20px 0;
}
</style>